<template>
	<view>
		<TabMenu :menus="tabList" :active_line="true" :tabCur="tabCur" ref="tableMenu" @clickCtTab="clickCtTab">
		</TabMenu>
		<view class="xiala">
			<!-- 内容信息 -->
			<view>
				<view class="no-topList">
					<text>操作</text>
					<view class="cu_btn" @click="exportFile">导出Excel</view>
				</view>
				<template v-if="reservation.length>0">
					<view class="apply_info" v-for="(item,index) in reservation" :key="item.id">
						<view class="info_header">
							<text>预约用户</text>
							<text class="f_red">{{item.userName}}</text>
						</view>
						<view class="info_c2">
							<view class="c2_item">
								<text>手机号：{{item.phone}}</text>
								<view class="copy_btn" @click="clipboardData(item.phone)">复制</view>
							</view>
							<view class="c2_item">
								<text>邀请码：{{item.invitationCode}}</text>
								<view class="copy_btn" @click="clipboardData(item.invitationCode)">复制</view>
							</view>
							<view class="c2_item m_b10">
								<text
									class="f_red">价格区间：{{item.storeReservationStartPrice}}~{{item.storeReservationEndPrice}}</text>
								<view class="copy_btn" v-if="false">推荐人</view>
							</view>
						</view>
						<view class="info_c1">
							<text>预约时间：{{item.createTime}}</text>
							<text>预约交易日：{{item.transactionDate}}</text>
						</view>
						<view class="info_footer">
							<view class="apply_btn" @click="load()">去配单</view>
						</view>
					</view>
				</template>
				<Nodata v-else></Nodata>
			</view>
		</view>
	</view>
</template>

<script>
	import TabMenu from '@/components/TabMenu.vue'
	import Nodata from '@/components/Nodata.vue'
	import {
		getReservationRecord,
		exportExcel,
		getExeclFileName
	} from '@/request/api/apply.js'
	import config from '@/request/config.js'
	export default {
		components: {
			TabMenu,
			Nodata
		},
		activated() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		mounted() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		onHide() {
			uni.setStorageSync('abc', 0)
		},
		data() {
			return {
				reservation: [{
					id: '', //主键自增ID
					storeId: '', //店铺ID
					storeName: '', //预约店铺名称
					storeReservationId: '', //预约价位ID
					storeReservationStartPrice: '', //预约价位开始
					storeReservationEndPrice: '', //预约价位结束
					createTime: '', //申请时间
					transactionDate: '', //预约交易日
					userId: '', //预约用户
					phone: '', //手机号
					userName: '', //用户名
					invitationCode: '', //邀请码
					state: 0, //1：已经配单,0:未配单,
					recommendedUserName: '', //推荐人
					recommendedUserId: '', //推荐人id
				}],
				tabCur: 0,
				tabList: [{
					title: '未配单 ',
				}, {
					title: '已配单',
				}]
			};
		},
		methods: {
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				this.getReservationList(this.tabCur)
			},
			getReservationList(state) {
				getReservationRecord(state).then((res) => {
					if (res.data) {
						this.reservation = res.data
					}
				})
			},
			load() {
				uni.navigateTo({
					url: '/pages/money/manage/shopManage'
				})
			},
			clipboardData(data) {
				uni.setClipboardData({
					data: data, // 设置要复制的文本内容
					success(res) {
						uni.showToast({
							title: '复制成功'
						})
					},
					fail(err) {
						uni.showToast({
							title: '复制失败'
						})
					}
				});
			},
			exportFile() {
				getExeclFileName(this.tabCur).then((fileName)=>{
					exportExcel(this.tabCur).then((res) => {
						let blob = new Blob([res],{
							type: 'application/vnd.ms-excel;charset=utf-8'
						})
						console.log(blob)
						const url = window.URL.createObjectURL(blob);
						const a = document.createElement('a');
						a.href = url;
						a.download = fileName.data;
						a.click();
						window.URL.revokeObjectURL(url);
					})
				})
				

			}
		},
		mounted() {
			this.getReservationList(0)
		},
		onShow() {
			this.reservation = []
		}
	}
</script>

<style lang='scss' scoped>
	.no-topList {
		margin-top: 10px;
		padding: 10px 16px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #eee;
		width: 100%;
	}

	.no-topList text {
		font-size: 16px;
	}

	.Yes-topList {
		margin-top: 10px;
		padding: 10px 16px;
		display: flex;
		flex-direction: column;
		background: #fff;
		width: 100%;

	}

	.Yes-topList .listItem1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		padding-bottom: 10px;
	}

	.listItem2 {
		padding-top: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-right: 50px;
	}

	.no-topList .cu_btn,
	.Yes-topList .listItem1 .cu_btn {
		color: #fff;
		background: #4da34d;
		font-size: 16px;
		padding: 5px 16px;
		border-radius: 5px;
		position: relative;
		border: 0px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
		margin-right: 50px;
	}

	.f_red {
		color: #fc4141;
	}

	.apply_info {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		background: white;
		color: #999;
		padding: 0 15px;
	}

	.apply_info .info_header {
		display: flex;
		flex-direction: row;
		border-bottom: .5px solid #eee;
		justify-content: space-between;
		height: 49px;
		align-items: center;
	}

	.info_c1 {
		display: flex;
		flex-direction: column;
		border-bottom: .5px solid #eee;
		padding-bottom: 10px;
	}

	.info_c2 {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}

	.info_c2 .c2_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 28px;
	}

	.m_b10 {
		margin-bottom: 10px;
	}

	.info_c2 .c2_item .copy_btn {
		width: 60px;
		height: 25px;
		background: #2866f9;
		color: white;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.info_footer {
		display: flex;
		flex-direction: row;
		padding: 11px 0;
		padding-right: 11px;
		justify-content: flex-end;

	}

	.apply_btn {
		border-radius: 5px;
		background: #fc4141;
		color: #fff;
		width: 50px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		margin-left: 10px;
	}
</style>